<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框:model="双向绑定表单的数据"-->
            <el-form :inline="true" :model="roleFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="roleFormData.roleName" clearable placeholder="请输入角色名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="roleFormData.startDate" clearable type="date" placeholder="请输开始时间"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="roleFormData.endDate"  clearable type="date" placeholder="请输入结束时间"></el-input>
                </el-form-item>
<!--                <el-form-item >-->
<!--                    <el-input v-model="rolrFormData.phone" placeholder="请输入电话"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary"@click="quere"> 查询</el-button>
                    <el-button type="primary" @click=" add()">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="roleId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="roleName"
                            label="角色名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="roleKey"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="updateStatus(scope.row.roleId,scope.row.status)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="update(scope.row.roleId)"></el-button>
                            <el-popconfirm
                                    confirm-button-text='好的'
                                    cancel-button-text='取消'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="确定删除角色么"
                                    @confirm=deleteRolebyId(scope.row.roleId)>
                            <el-button type="danger" icon="el-icon-delete" circle slot="reference" ></el-button></el-popconfirm>
                            <el-button type="warning" icon="el-icon-star-off" circle  @click="showllMenu(scope.row.roleId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--                分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
        <!--分配角色的弹出框-->
        <el-dialog
                title="分配角色菜单"
                :visible.sync="see"
                width="30%"
                :before-close="handleClose">
            <el-tree
                    :data="menus"
                    show-checkbox
                    node-key="menuId"
                    ref="menuTree"
                    :default-expanded-keys="roleMenuIds"
                    :props="defaultProps"><!--       有了默认选中把这个删除            :default-checked-keys="roleMenuIds"-->
            </el-tree>
                 <span slot="footer" class="dialog-footer">
     <el-button @click="see = false">取 消</el-button>
     <el-button type="primary" @click="confirmFenMenu">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog  title="角色信息"
                    :visible.sync="status"
                    width="40%"
                    :before-close="handleClose">
            <RoleAddOrupdata :roleId="roleId"  v-model="status" :key="timer"></RoleAddOrupdata>
        </el-dialog>
    </div>
</template>

<script>
    import RoleAddOrupdata from "../../components/system/RoleAddOrUpdata";
    export default {
        components:{RoleAddOrupdata},
        name: "Role",
        data(){
            return{
                timer: '',//更新时间戳从而重新渲染组件
                status:false,
                see:false,
                pageSize: 5,
                //当前的显示的页码
                currentPage:1,
                tableData:[],
                roleFormData:{},
                roleId:0,
                total:0,
                menus:[],
                roleMenuIds: {},
                defaultProps: {
                    children: 'children',
                    label: 'menuName'
                },
            }
        },
        created() {
            this.initRoleTable()
        },
        methods:{
            //重新渲染组件
            upcomen() {
                this.timer = new Date().getTime()//创新刷新组件问题
            },
            add(){
             this.roleId=''
                this.status=true
                this.upcomen()
            },
            update(roleId){
                this.roleId=roleId
                this.status=true
                this.upcomen();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            initRoleTable(){
                var that = this;
                this.$http.post(`/system/role/initRoleTable/${this.currentPage}/${this.pageSize}`,this.roleFormData).then(function (resp) {
                 that.tableData=resp.data.result.record;
                    that.total = resp.data.result.total;

                })
            },
            showllMenu(roleId){
                this.roleId = roleId;

                var that=this

                this.$http.get(`/system/menu/getMenuByRoleId/${this.roleId}`).then(function (resp) {
                    that.menus = resp.data.result.menus;
                    that.roleMenuIds = resp.data.result.roleMenuIds;
                    that.see=true
                    //默认选中数的数据
                    setTimeout(() =>{
                        resp.data.result.roleMenuIds.forEach(value => {
                            that.$refs.menuTree.setChecked(value, true, false);
                        })}, 100)
                });

            },
            handleSizeChange(v){
                this.pageSize = v;
                this.initRoleTable()
            },
            //切换页码时触发该方法
            handleCurrentChange(v){
                this.currentPage = v;
                this.initRoleTable()
            },
            quere() {
                this.initRoleTable()
            },

            //修改角色状态
            updateStatus(roleId, status) {
                var that=this
                this.$http.get(`/system/role/updaterolestatus/${roleId}/${status}`).then(function (response) {
                   that.$message.success(response.data.message)
                    that.initRoleTable()

                });
            },
            deleteRolebyId(roleId) {
                var that = this;
                this.$http.delete(`/system/role/deleterole/${roleId}`).then(function (response) {
                    that.initRoleTable();
                    that.$message.success(response.data.message)

                });


            },
            confirmFenMenu(){
                var that = this;
                this.roleMenuIds=this.$refs.menuTree.getHalfCheckedKeys().concat(this.$refs.menuTree.getCheckedKeys())
                this.$http.get("system/menu/confirmFenMenu?roleId=" + this.roleId +"&roleMenuIds=" + this.roleMenuIds).then(function (resp) {
                    that.$message.success(resp.data.message);
                    that.see = false;

                });
            }
        }
    }
</script>

<style scoped>

</style>